<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <title>Document</title>

    <!-- <style>
        h3{
            text-align: center;
        }
    </style> -->

    
</head>
<body>
    <div class="container">
        <div class="jumbotron">
            <h1 class="text-center">学习Bootstrap 首面</h1>  
        </div>
        <!-- 响应式--图像 -->
        <!-- <div class="container-fluid">
            <img  class="img-fluid rounded "src="img/img2.jpg">
            <img class="img-fluid rounded-circle" src="img/img2.jpg">
            <img class="img-fluid rounded-circle" src="img/img2.jpg">
        </div> -->
        <nav class="navbar navbar-expand-sm bg-light">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link " href="#">菜单一</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">菜单二</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#">菜单三</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#">菜单四</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#">菜单五</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="#">菜单六</a>
                </li>
            </ul>
        </nav>
        <div class="row ">
            <div class="col-sm-4 text-center">
                <img  class="img-fluid rounded" src="img/img2.jpg">
                <h3 class="text-center" >ONE</h3>    
                <p class="text-left">1、知足且坚定 温柔且上进</p>
                <p class="text-left">2、你一定要站在自己所热爱的世界里，闪闪发亮</p>
                <p class="text-left">3、我们各自努力，最高处见。</p>
            </div>
            <div class="col-sm-4">
                <img class="img-fluid rounded-circle" src="img/img2.jpg">
                <h3 class="text-center">TWO</h3>
                <p class="text-left">1、半山腰总是最挤的，你得去山顶看看</p>
                <p class="text-left">2、我喜欢的人很优秀，我努力的理由是配得上他</p>
                <p class="text-left">3、凡事皆有可能，永远别说永远。</p>
            </div>
            <div class="col-sm-4">
                <img class="img-fluid img-thumbnail" src="img/img2.jpg">
                <h3 class="text-center">THREE</h3>        
                <p class="text-left">1、知足且坚定 温柔且上进</p>
                <p class="text-left">2、努力只能及格 拼命才会优秀</p>
                <p class="text-left">3、生活原本沉闷，但跑起来就有风</p>
            </div>
        </div>
        <div class="jumbotron">
            <h1 class="text-center">版权</h1>  
        </div>
    </div>
    
    
</body>
</html>